<template>
    <div class="person">
        <h1>情况一监视ref定义的基本数据类型数据</h1>
     <h2>当前求和为sum:{{ sum }}</h2>
     <button @click="changeSum">点我sum+1</button>


        <h1>情况二监视ref定义的对象数据类型数据</h1>
     <h2>姓名:{{ person.name}}</h2>
     <h2>年龄:{{ person.age}}</h2>
     <button @click="changeName">点我修改名字</button>
     <button @click="changeAge">点我修改年龄</button>
     <button @click="changePerson">点我修改整个人</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { ref,watch} from 'vue';
          //数据
          let sum=ref(0)
          function changeSum(){
            sum.value+=1
          }

          let person=ref({name:"zhang-san",age:18})

          function changeAge(){
            person.value.age+=1
          }
          function changeName(){
            person.value.name+="*"
          }
          function changePerson(){
            person.value={name:"li-si",age:36}
          }

          //监视,情况一监视ref定义的基本数据类型数据
          watch(sum,(newValue,oldValue)=>{
            console.log("sum变化了",newValue,oldValue)
          })

           //监视,情况二ref定义的对象数据类型数据,监视的是地址值
          watch(person,(newValue,oldValue)=>{
            console.log("person变化了",newValue,oldValue)
          },{deep:true})
  
</script>

<style>
    .person{
        background-color:skyblue;
        box-shadow:0 0 10px;
        border-radius:10px;
        padding:20px;
    }
    button{
        margin:0 5px;
    }
</style>